{% extends "admin/base.html" %}

{% block stylesheets %}
{% endblock %}

{% block content %}
<div id="team-info-edit-modal" class="modal fade">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<h2 class="modal-action text-center w-100">{{ 'Edit Team' if en else '编辑队伍' }}</h2>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close" style="position: absolute;top: 0;right: 0;padding: 30px;">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<div class="modal-body clearfix">
				{% include "admin/modals/teams/edit.html" %}
			</div>
		</div>
	</div>
</div>

<div id="team-add-modal" class="modal fade">
	<div class="modal-dialog modal-lg">
		<div class="modal-content">
			<div class="modal-header">
				<h2 class="modal-action text-center w-100">{{ 'Add Team Members' if en else '添加队员' }}</h2>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close" style="position: absolute;top: 0;right: 0;padding: 30px;">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<div class="modal-body clearfix">
			</div>
		</div>
	</div>
</div>

<div id="team-invite-modal" class="modal fade">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<h2 class="modal-action text-center w-100">{{ 'Team Invite' if en else '邀请队员' }}</h2>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close" style="position: absolute;top: 0;right: 0;padding: 30px;">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<div class="modal-body clearfix">
				{% with form = Forms.teams.TeamInviteForm() %}
				<form method="POST">
					<div class="form-group">
						<b>{{ 'Invite Link' if en else '邀请链接' }}</b>
						<div class="input-group mb-3">
							{{ form.link(id="team-invite-link", class="form-control") }}
							<div class="input-group-append">
								<button id="team-invite-link-copy" class="btn btn-outline-secondary" type="button">
									<i class="fas fa-clipboard"></i>
								</button>
							</div>
						</div>
						<small class="form-text text-muted">
                            {{ 'Share this link for users to join this team' if en else '分享此链接以便用户加入该团队' }}
						</small>
					</div>
				</form>
				{% endwith %}
			</div>
		</div>
	</div>
</div>

<div id="team-statistics-modal" class="modal fade">
	<div class="modal-dialog modal-xl">
		<div class="modal-content">
			<div class="modal-header">
				<h2 class="modal-action text-center w-100">{{ 'Team Statistics' if en else '队伍数据' }}</h2>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close" style="position: absolute;top: 0;right: 0;padding: 30px;">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<div class="modal-body clearfix">
				{% include "admin/modals/teams/statistics.html" %}
			</div>
		</div>
	</div>
</div>

<div id="team-captain-modal" class="modal fade">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<h2 class="modal-action text-center w-100">{{ 'Choose Captain' if en else '选择队长' }}</h2>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close" style="position: absolute;top: 0;right: 0;padding: 30px;">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<div class="modal-body clearfix">
				{% include "admin/modals/teams/captain.html" %}
			</div>
		</div>
	</div>
</div>

<div id="team-award-modal" class="modal fade">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<h2 class="modal-action text-center w-100">{{ 'Award Team Member' if en else '奖励成员' }}</h2>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close" style="position: absolute;top: 0;right: 0;padding: 30px;">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<div class="modal-body clearfix">
				<div class="form-group">
					<label for="award-member-input">{{ 'Member' if en else '成员' }}</label>
					<select class="form-control custom-select" id="award-member-input">
						<option value=""> -- </option>
						{% for member in members %}
						<option value="{{ member.id }}">{{ member.name }}</option>
						{% endfor %}
					</select>
				</div>
				{% include "admin/modals/awards/create.html" %}
			</div>
		</div>
	</div>
</div>

<template id="team-member-select">
	<select class="form-control custom-select">
		<option value=""> -- </option>
		{% for member in members %}
		<option value="{{ member.id }}">{{ member.name }}</option>
		{% endfor %}
	</select>
</template>

<div id="team-addresses-modal" class="modal fade">
	<div class="modal-dialog modal-lg">
		<div class="modal-content">
			<div class="modal-header">
				<h2 class="modal-action text-center w-100">{{ 'IP Addresses' if en else 'IP地址' }}</h2>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close" style="position: absolute;top: 0;right: 0;padding: 30px;">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<div class="modal-body clearfix">
				{% include "admin/modals/teams/addresses.html" %}
			</div>
		</div>
	</div>
</div>

<div class="jumbotron">
	<div class="container">
		<h1 id="team-id" class="text-center">{{ team.name }}</h1>
		<div class="mb-2">
			{% if team.verified %}
                <span class="badge badge-success">{{ 'verified' if en else '已认证' }}</span>
			{% endif %}
			{% if team.hidden %}
                <span class="badge badge-danger">{{ 'hidden' if en else '已隐藏' }}</span>
			{% endif %}
			{% if team.banned %}
                <span class="badge badge-danger">{{ 'banned' if en else '已封禁' }}</span>
			{% endif %}
		</div>

		{% if team.oauth_id %}
			<a href="https://majorleaguecyber.org/t/{{ team.name }}">
				<h3><span class="badge badge-primary">Official</span></h3>
			</a>
		{% endif %}

		{% if team.affiliation %}
			<h3 class="d-inline-block">
				<span class="badge badge-primary">{{ team.affiliation }}</span>
			</h3>
		{% endif %}
		{% if team.country %}
			<h3 class="d-inline-block">
				<span class="badge badge-primary">
					<i class="flag-{{ team.country.lower() }}"></i>
					{{ lookup_country_code(team.country) }}
				</span>
			</h3>
		{% endif %}

		{% for field in team.get_fields(admin=true) %}
			<h3 class="d-block">
				{{ field.name }}: {{ field.value }}
			</h3>
		{% endfor %}

		<h2 class="text-center">{{ members | length }}{{ ' members' if en else '个成员' }}</h2>
		<h3 id="team-place" class="text-center">
            {% if place %}
                <small>{{ place }}</small>
            {% endif %}
		</h3>
		<h3 id="team-score" class="text-center">
            {% if score %}
                <small>{{ score }}{{ ' points' if en else '分' }}</small>
            {% endif %}
		</h3>
		<hr class="w-50">
		<div class="pt-3">
			<a class="edit-team text-dark no-decoration">
				<i class="btn-fa fas fa-pencil-alt fa-2x px-2" data-toggle="tooltip" data-placement="top"
				   title="{{ 'Edit Team' if en else '编辑队伍' }}"></i>
			</a>
			<a class="invite-team text-dark no-decoration">
				<i class="btn-fa fas fa-ticket-alt fa-2x px-2" data-toggle="tooltip" data-placement="top"
				   title="{{ 'Team Invite Link' if en else '团队邀请链接' }}"></i>
			</a>
			<a class="members-team text-dark no-decoration">
				<i class="btn-fa fas fa-user-plus fa-2x px-2" data-toggle="tooltip" data-placement="top"
				   title="{{ 'Add Team Members' if en else '添加团队成员' }}"></i>
			</a>
			<a class="edit-captain text-dark no-decoration">
				<i class="btn-fa fas fa-user-tag fa-2x px-2" data-toggle="tooltip" data-placement="top"
				   title="{{ 'Choose Captain' if en else '选择队长' }}"></i>
			</a>
			<a class="award-team text-dark no-decoration">
				<i class="btn-fa fas fa-trophy fa-2x px-2" data-toggle="tooltip" data-placement="top" title="{{ 'Award Team Member' if en else '奖励团队成员' }}"></i>
			</a>
			<a class="delete-team text-dark no-decoration">
				<i class="btn-fa fas fa-trash-alt fa-2x px-2" data-toggle="tooltip" data-placement="top"
				   title="{{ 'Delete Team' if en else '删除队伍' }}"></i>
			</a>
		</div>
		<div class="pt-3">
			<a class="statistics-team text-dark no-decoration">
				<i class="btn-fa fas fa-chart-pie fa-2x px-2" data-toggle="tooltip" data-placement="top"
				   title="{{ 'Team Statistics' if en else '队伍数据' }}"></i>
			</a>
			<a class="addresses-team text-dark no-decoration">
				<i class="btn-fa fas fa-network-wired fa-2x px-2" data-toggle="tooltip" data-placement="top" title="{{ 'IP Addresses' if en else 'IP地址' }}"></i>
			</a>
			{% if team.website %}
			<a href="{{ team.website }}" target="_blank" class="text-dark no-decoration" rel="noopener">
				<i class="btn-fa fas fa-external-link-alt fa-2x px-2" data-toggle="tooltip" data-placement="top"
					title="{{ team.website }}" aria-hidden="true"></i>
			</a>
			{% endif %}
		</div>
	</div>
</div>

<div class="container">
	<div class="row min-vh-25 pt-5 pb-5">
		<div class="col-md-12 table-responsive">
			<table class="table table-striped">
				<h3 class="text-center">{{ 'Team Members' if en else '团队成员' }}</h3>
				<thead>
				<tr>
					<td class="text-center"></td>
					<td class="text-center"><b>{{ 'Username' if en else '用户昵称' }}</b></td>
					<td class="text-center"><b>{{ 'E-Mail' if en else '邮箱' }}</b></td>
					<td class="text-center"><b>{{ 'Score' if en else '得分' }}</b></td>
					<td class="text-center"></td>
				</tr>
				</thead>
				<tbody>
				{% for member in members %}
					<tr>
						<td class="text-center" data-href="{{ url_for('admin.users_detail', user_id=member.id) }}">
							{% if team.captain_id == member.id %}
								<span class="badge badge-primary">{{ 'Captain' if en else '队长' }}</span>
							{% endif %}
						</td>
						<td class="text-left" data-href="{{ url_for('admin.users_detail', user_id=member.id) }}">
							<a href="{{ url_for('admin.users_detail', user_id=member.id) }}">
								{{ member.name }}
							</a>
						</td>
						<td class="text-center" data-href="{{ url_for('admin.users_detail', user_id=member.id) }}">
							<a href="mailto:{{ member.email }}" target="_blank">
								{{ member.email }}
							</a>
						</td>
						<td class="text-center" data-href="{{ url_for('admin.users_detail', user_id=member.id) }}">
							{{ member.score }}
						</td>
						<td class="text-center">
							<span class="delete-member cursor-pointer" member-id="{{ member.id }}"
								  member-name="{{ member.name }}" data-toggle="tooltip"
								  data-placement="top" title="{{ 'Remove ' if en else '移除' }}{{ member.name }}">
								<i class="fas fa-times"></i>
							</span>
						</td>
					</tr>
				{% endfor %}
				</tbody>
			</table>
		</div>
	</div>

	<nav class="nav nav-tabs nav-fill pt-5" id="myTab" role="tablist">
		<a class="nav-item nav-link active" id="nav-solves-tab" data-toggle="tab" href="#nav-solves" role="tab"
		   aria-controls="nav-solves" aria-selected="true">{{ 'Solves' if en else '正确提交' }}</a>

		<a class="nav-item nav-link" id="nav-wrong-tab" data-toggle="tab" href="#nav-wrong" role="tab"
		   aria-controls="nav-wrong" aria-selected="false">{{ 'Fails' if en else '错误提交' }}</a>

		<a class="nav-item nav-link" id="nav-awards-tab" data-toggle="tab" href="#nav-awards" role="tab"
		   aria-controls="nav-awards" aria-selected="false">{{ 'Awards' if en else '获得奖项' }}</a>

		<a class="nav-item nav-link" id="nav-missing-tab" data-toggle="tab" href="#nav-missing" role="tab"
		   aria-controls="nav-missing" aria-selected="false">{{ 'Missing' if en else '尚未解出' }}</a>
	</nav>

	<div class="tab-content min-vh-50 pb-5" id="nav-tabContent">
		<div class="tab-pane fade show active" id="nav-solves" role="tabpanel" aria-labelledby="nav-solves-tab">
			<h3 class="text-center pt-5 d-block">{{ 'Solves' if en else '正确提交' }}</h3>
			<div class="row">
				<div class="col-md-12">
					<div class="float-right pb-3">
						<div class="btn-group" role="group">
							<button type="button" class="btn btn-outline-danger" id="solves-delete-button">
								<i class="btn-fa fas fa-trash-alt"></i>
							</button>
						</div>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-md-12 table-responsive">
					<table class="table table-striped border">
						<thead>
							<tr>
								<th class="border-right" data-checkbox>
									<div class="form-check text-center">
										<input type="checkbox" class="form-check-input" autocomplete="off" data-checkbox-all>&nbsp;
									</div>
								</th>
								<th class="sort-col text-center"><b>{{ 'Challenge' if en else '题目名称' }}</b></th>
								<th class="sort-col text-center"><b>{{ 'User' if en else '用户昵称' }}</b></th>
								<th class="sort-col text-center"><b>{{ 'Submitted' if en else '提交内容' }}</b></th>
								<th class="sort-col text-center"><b>{{ 'Category' if en else '类别' }}</b></th>
								<th class="sort-col text-center"><b>{{ 'Subcategory' if en else '子类别' }}</b></th>
								<th class="sort-col text-center"><b>{{ 'Value' if en else '分值' }}</b></th>
								<th class="sort-col text-center"><b>{{ 'Time' if en else '时间' }}</b></th>
							</tr>
						</thead>
						<tbody>
						{% for solve in solves %}
							<tr class="chal-solve" data-href="{{ url_for("admin.challenges_detail", challenge_id=solve.challenge_id) }}">
								<td class="border-right" data-checkbox>
									<div class="form-check text-center">
										<input type="checkbox" class="form-check-input" value="{{ solve.id }}" autocomplete="off"
										data-submission-id="{{ solve.id }}"
										data-submission-type="{{ solve.type }}"
										data-submission-challenge="{{ solve.challenge.name }}">&nbsp;
									</div>
								</td>
								<td class="text-center chal" id="{{ solve.challenge_id }}">
									<a href="{{ url_for("admin.challenges_detail", challenge_id=solve.challenge_id) }}">
										{{ solve.challenge.name }}
									</a>
								</td>
								<td class="text-center">
									<a href="{{ url_for("admin.users_detail", user_id=solve.user_id) }}">
										{{ solve.user.name }}
									</a>
								</td>
								<td class="flag" id="{{ solve.id }}"><pre style="word-wrap: break-word;word-break: break-word;">{{ solve.provided }}</pre></td>
								<td class="text-center">{{ solve.challenge.category }}</td>
								<td class="text-center">{{ solve.challenge.subcategory }}</td>
								<td class="text-center">{{ solve.challenge.value }}</td>
								<td class="text-center solve-time" style="width: 240px;">
									<span data-time="{{ solve.date | isoformat }}"></span>
								</td>
							</tr>
						{% endfor %}
						</tbody>
					</table>
				</div>
			</div>
		</div>

		<div class="tab-pane fade" id="nav-wrong" role="tabpanel" aria-labelledby="nav-wrong-tab">
			<h3 class="text-center pt-5 d-block">{{ 'Fails' if en else '错误提交' }}</h3>
			<div class="row">
				<div class="col-md-12">
					<div class="float-right pb-3">
						<div class="btn-group" role="group">
							<button type="button" class="btn btn-outline-danger" id="fails-delete-button">
								<i class="btn-fa fas fa-trash-alt"></i>
							</button>
						</div>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-md-12 table-responsive">
					<table class="table table-striped border">
						<thead>
							<tr>
								<th class="border-right" data-checkbox>
									<div class="form-check text-center">
										<input type="checkbox" class="form-check-input" autocomplete="off" data-checkbox-all>&nbsp;
									</div>
								</th>
								<th class="sort-col text-center"><b>{{ 'Challenge' if en else '题目名称' }}</b></th>
								<th class="sort-col text-center"><b>{{ 'User' if en else '用户昵称' }}</b></th>
								<th class="sort-col text-center"><b>{{ 'Submitted' if en else '提交内容' }}</b></th>
								<th class="sort-col text-center"><b>{{ 'Time' if en else '时间' }}</b></th>
							</tr>
						</thead>
						<tbody>
						{% for fail in fails %}
							<tr class="chal-wrong" data-href="{{ url_for("admin.challenges_detail", challenge_id=fail.challenge_id) }}">
								<td class="border-right" data-checkbox>
									<div class="form-check text-center">
										<input type="checkbox" class="form-check-input" value="{{ fail.id }}" autocomplete="off"
										data-submission-id="{{ fail.id }}"
										data-submission-type="{{ fail.type }}"
										data-submission-challenge="{{ fail.challenge.name }}">&nbsp;
									</div>
								</td>
								<td class="text-center chal" id="{{ fail.challenge_id }}">
									<a href="{{ url_for("admin.challenges_detail", challenge_id=fail.challenge_id) }}">
										{{ fail.challenge.name }}
									</a>
								</td>
								<td class="text-center">
									<a href="{{ url_for("admin.users_detail", user_id=fail.user_id) }}">
										{{ fail.user.name }}
									</a>
								</td>
								<td class="flag" id="{{ fail.id }}"><pre style="word-wrap: break-word;word-break: break-word;">{{ fail.provided }}</pre></td>
								<td class="text-center solve-time" style="width: 240px;">
									<span data-time="{{ fail.date | isoformat }}"></span>
								</td>
							</tr>
						{% endfor %}
						</tbody>
					</table>
				</div>
			</div>
		</div>

		<div class="tab-pane fade" id="nav-awards" role="tabpanel" aria-labelledby="nav-awards-tab">
			<h3 class="text-center pt-5 d-block">{{ 'Awards' if en else '获得奖项' }}</h3>
			<div class="row">
				<div class="col-md-12">
					<div class="float-right pb-3">
						<div class="btn-group" role="group">
							<button type="button" class="btn btn-outline-danger" id="awards-delete-button">
								<i class="btn-fa fas fa-trash-alt"></i>
							</button>
						</div>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-md-12 table-responsive">
					<table class="table table-striped border">
						<thead>
						<tr>
							<th class="border-right" data-checkbox>
								<div class="form-check text-center">
									<input type="checkbox" class="form-check-input" autocomplete="off" data-checkbox-all>&nbsp;
								</div>
							</th>
							<th class="sort-col text-center"><b>{{ 'Name' if en else '名称' }}</b></th>
							<th class="sort-col text-center"><b>{{ 'User' if en else '用户' }}</b></th>
							<th class="sort-col text-center"><b>{{ 'Description' if en else '描述' }}</b></th>
							<th class="sort-col text-center"><b>{{ 'Date' if en else '时间' }}</b></th>
							<th class="sort-col text-center"><b>{{ 'Value' if en else '分值' }}</b></th>
							<th class="sort-col text-center"><b>{{ 'Category' if en else '类别' }}</b></th>
							<th class="sort-col text-center"><b>{{ 'Icon' if en else '图标' }}</b></th>
						</tr>
						</thead>
						<tbody id="awards-body">
						{% for award in awards %}
							<tr class="award-row">
								<td class="border-right" data-checkbox>
									<div class="form-check text-center">
										<input type="checkbox" class="form-check-input" value="{{ award.id }}" autocomplete="off" data-award-id="{{ award.id }}" data-award-name="{{ award.name }}">&nbsp;
									</div>
								</td>
								<td class="text-center chal" id="{{ award.id }}">{{ award.name }}</td>
								<td class="text-center">
									<a href="{{ url_for("admin.users_detail", user_id=award.user_id) }}">
										{{ award.user.name }}
									</a>
								</td>
								<td class=""><pre>{{ award.description }}</pre></td>
								<td class="text-center solve-time" style="width: 240px;">
									<span data-time="{{ award.date | isoformat }}"></span>
								</td>
								<td class="text-center">{{ award.value }}</td>
								<td class="text-center">{{ award.category }}</td>
								<td class="text-center"><i class="award-icon award-{{ award.icon }}"></i> {{ award.icon }}</td>
							</tr>
						{% endfor %}
						</tbody>
					</table>
				</div>
			</div>
		</div>

		<div class="tab-pane fade" id="nav-missing" role="tabpanel" aria-labelledby="nav-missing-tab">
			<h3 class="text-center pt-5 d-block">{{ 'Missing' if en else '尚未解出' }}</h3>
			<div class="row">
				<div class="col-md-12">
					<div class="float-right pb-3">
						<div class="btn-group" role="group">
							<button type="button" class="btn btn-outline-success" id="missing-solve-button">
								<i class="btn-fa fas fa-check"></i>
							</button>
						</div>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-md-12 table-responsive">
					<table class="table table-striped border">
					<thead>
						<tr>
							<th class="border-right" data-checkbox>
								<div class="form-check text-center">
									<input type="checkbox" class="form-check-input" autocomplete="off" data-checkbox-all>&nbsp;
								</div>
							</th>
							<th class="sort-col text-center"><b>{{ 'Challenge' if en else '题目名称' }}</b></th>
							<th class="sort-col text-center"><b>{{ 'Category' if en else '类别' }}</b></th>
							<th class="sort-col text-center"><b>{{ 'Subcategory' if en else '子类别' }}</b></th>
							<th class="sort-col text-center"><b>{{ 'Value' if en else '分值' }}</b></th>
						</tr>
					</thead>
					<tbody>
					{% for challenge in missing %}
						<tr class="chal-solve" data-href="{{ url_for("admin.challenges_detail", challenge_id=challenge.id) }}">
							<td class="border-right" data-checkbox>
								<div class="form-check text-center">
									<input type="checkbox" class="form-check-input" value="{{ challenge.id }}" autocomplete="off" data-missing-challenge-id="{{ challenge.id }}"
									data-missing-challenge-name="{{ challenge.name }}">&nbsp;
								</div>
							</td>
							<td class="text-center chal" id="{{ challenge.id }}">
								<a href="{{ url_for("admin.challenges_detail", challenge_id=challenge.id) }}">
									{{ challenge.name }}
								</a>
							</td>
							<td class="text-center">{{ challenge.category }}</td>
							<td class="text-center">{{ challenge.subcategory }}</td>
							<td class="text-center">{{ challenge.value }}</td>
						</tr>
					{% endfor %}
					</tbody>
				</table>
				</div>
			</div>
		</div>
	</div>

	<div class="row min-vh-25 pt-5">
		<div class="col-md-10 offset-md-1">
			<div id="comment-box">
			</div>
		</div>
	</div>
</div>

{% endblock %}

{% block scripts %}
<script>
	var TEAM_ID = {{ team.id }};
	var TEAM_NAME = {{ team.name | tojson }};
	var stats_data = {{ {
		'type': 'team',
		'id': team.id,
		'name': team.name,
		'account_id': team.id,
	} | tojson }};
</script>
<script defer src="{{ url_for('views.themes', theme='admin', path='js/echarts.bundle.js') }}"></script>
<script defer src="{{ url_for('views.themes', theme='admin', path='js/graphs.js') }}"></script>
{% endblock %}

{% block entrypoint %}
	<script defer src="{{ url_for('views.themes', theme='admin', path='js/pages/team.js') }}"></script>
{% endblock %}
